<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <title>流程详情</title>
  <!--/*--> 引入css、jq、layui等样式、js <!--*/-->
  <meta th:include="~{layout/layout_head :: head}">
</head>
<body>
<div style="max-width: 1100px;margin: 30px auto;">
  <div>
    <h1>流程列表</h1>
    <hr class="layui-bg-red">
    <table class="layui-table">
      <thead>
      <tr>
        <td style="width: 19%;">任务ID</td>
        <td style="width: 14%;">流程名称</td>
        <td style="width: 17%;">流入时间</td>
        <td style="width: 17%;">流出时间</td>
        <td>时差</td>
        <td style="width: 25%;">备注</td>
        <td style="width: 6%;">状态</td>
      </tr>
      </thead>
      <tbody th:each="item,status:${his}">
      <tr th:style="${status.first && item.processStatus!='0'}?'color:blue;'" th:title="${status.first}?'当前流程'">
        <td th:text="${item.id}">ID</td>
        <td th:text="${item.activityName}">流程名称</td>
        <td th:text="${#dates.format(item.startTime, 'yyyy-MM-dd HH:mm:ss')}">流入时间</td>
        <td th:text="${#dates.format(item.endTime, 'yyyy-MM-dd HH:mm:ss')}">流出时间</td>
        <td th:text="${item.hour}">1</td>
        <td th:text="${item.remarks}">备注</td>
        <td>
          <!--/*--> 不是第一条数据时 <!--*/-->
          <div th:if="${!status.first}">
            <b th:if="${item.status=='1'}" style="color: #01AAED;">同意</b>
            <b th:if="${item.status=='2'}" style="color: red;">不同意</b>
            <span th:if="${item.status=='3'}">重新发起</span>
            <span th:if="${item.status=='0'}">发起点</span>
          </div>
          <!--/*--> 第一条数据时 <!--*/-->
          <div th:if="${status.first}">
            <b th:if="${item.status==null && item.processStatus!='0' && item.processStatus!='1'}" style="color: blue;">待处理</b>
            <b th:if="${item.status==null && item.processStatus=='1'}" style="color: blue;">暂存状态</b>
            <b th:if="${item.processStatus=='0'}" style="color: blue;">同意<span style="color: red;">(完结)</span></b>
            <b th:if="${item.processStatus=='-1'}" style="color: red;">已经撤销</b>
          </div>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
  <br><br>
  <h1>流程进行图</h1>
  <hr class="layui-bg-red">
  <img style="margin: 10px auto;" th:src="${'/image/'+processId}"/>
</div>
<script th:inline="javascript">
  layui.use(['layer', 'table'], function () {
    var layer = layui.layer;
    var table = layui.table;
  });
</script>
</body>
</html>
